<template>
  <div class="test-csv-data">
    <div class="header">
      <h1>CSV数据测试</h1>
      <a-button @click="loadTestData" type="primary">加载测试数据</a-button>
    </div>
    
    <div class="data-info">
      <h3>数据信息</h3>
      <p>节点数量: {{ testData.nodes.length }}</p>
      <p>连线数量: {{ testData.links.length }}</p>
      <p>消息: {{ testData.message }}</p>
      <p>成功状态: {{ testData.success }}</p>
    </div>
    
    <div class="graph-container">
      <SimpleD3Graph 
        v-if="testData.nodes.length > 0" 
        :data="testData" 
        @node-click="handleNodeClick"
      />
      <div v-else class="no-data">
        <a-empty description="点击加载测试数据按钮来查看图谱" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import SimpleD3Graph from '@/components/3d-network/SimpleD3Graph.vue'

const testData = ref({
  nodes: [],
  links: [],
  message: '',
  success: false
})

const loadTestData = () => {
  // 模拟您提供的数据格式 - 46个节点
  const nodeNames = [
    'ID', '姓名', '年龄', '性别', '部门', '职位', '薪资', '入职日期', '学历', '专业',
    '工作经验', '技能1', '技能2', '技能3', '项目1', '项目2', '项目3', '绩效评级', '培训记录', '证书',
    '联系方式', '地址', '紧急联系人', '社保号', '银行卡号', '考勤记录', '请假记录', '加班记录', '出差记录', '报销记录',
    '设备使用', '系统权限', '安全等级', '合同类型', '合同期限', '试用期', '转正日期', '离职日期', '离职原因', '推荐人',
    '面试官', 'HR', '直属领导', '团队规模', '工作地点', '工作性质'
  ]
  
  testData.value = {
    links: [], // 空的连线数组
    message: 'CSV数据解析成功',
    nodes: nodeNames.map((name, index) => ({
      id: `node_${index + 1}`,
      name: name,
      type: 'column',
      size: Math.random() * 20 + 10 // 随机大小
    })),
    stats: {
      categorical_columns: 40,
      datetime_columns: 0,
      missing_data_percentage: 8.2,
      numeric_columns: 6,
      processed_at: '2025-09-12T01:11:08.118402'
    },
    success: true
  }
  
  message.success('测试数据加载成功 - 46个节点')
}

const handleNodeClick = (node) => {
  message.info(`点击了节点: ${node.name || node.id}`)
  console.log('点击的节点:', node)
}
</script>

<style scoped>
.test-csv-data {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.data-info {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.data-info h3 {
  margin-top: 0;
}

.data-info p {
  margin: 5px 0;
}

.graph-container {
  flex: 1;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
